<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单焦点事件</title>
  </head>
  <body>
      <!-- 焦点 -->
    <input type="text" id="focus" value="" placeholder="请输入手机号码"/>
    <span></span>
    <!-- change事件 -->
    <select name="" id="sel">
        <option value="苹果">苹果</option>
        <option value="葡萄">葡萄</option>
        <option value="香蕉">香蕉</option>
        <option value="菠萝">菠萝</option>
        <option value="桃子">桃子</option>
    </select>
    <script>
      let focus = document.getElementById("focus");
      focus.onfocus = function () {
        console.log("触发获得焦点");
      };
      focus.onblur=function(){
          //正则表达式
          let reg=/^1[345789]\d{9}$/;
          //正则验证
          if(reg.test(focus.value)){
              //自己的下一个兄弟
              this.nextElementSibling.innerHTML="√";
              this.nextElementSibling.style.color="green"
          }else{
            this.nextElementSibling.innerHTML="×";
            this.nextElementSibling.style.color="red"
          }
          console.log("触发失去焦点")
      }

      //change事件
      let sel=document.getElementById("sel");
      sel.onchange=function(){
          console.log(this.value)
      }
    </script>
  </body>
</html>
